<html>
<body>
<canvas id="c1" width="250" height="250"></canvas>
<canvas id="c2" width="250" height="250"></canvas>
<br>
<canvas id="c3" width="250" height="250"></canvas>
<canvas id="c4" width="250" height="250"></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById('c1');
var canvas2 = document.getElementById('c2');
var canvas3 = document.getElementById('c3');
var canvas4 = document.getElementById('c4');
var bgcanvas = document.createElement('canvas');
bgcanvas.width = 100;
bgcanvas.height = 100;
var bgctx = bgcanvas.getContext('2d');
bgctx.fillStyle = 'green';
bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);

var bgcanvasLowerRight = document.createElement('canvas');
bgcanvasLowerRight.width = 100;
bgcanvasLowerRight.height = 100;
var bgctxLowerRight = bgcanvasLowerRight.getContext('2d');
bgctxLowerRight.fillStyle = 'green';
bgctxLowerRight.fillRect(50, 50, 100, 100);

var bgcanvasUpperLeft = document.createElement('canvas');
bgcanvasUpperLeft.width = 100;
bgcanvasUpperLeft.height = 100;
var bgctxUpperLeft = bgcanvasUpperLeft.getContext('2d');
bgctxUpperLeft.fillStyle = 'green';
bgctxUpperLeft.fillRect(0, 0, bgcanvasUpperLeft.width/2, bgcanvasUpperLeft.height/2);

var bgcanvasCenter = document.createElement('canvas');
bgcanvasCenter.width = 400;
bgcanvasCenter.height = 400;
var bgctxCenter = bgcanvasCenter.getContext('2d');
bgctxCenter.fillStyle = 'green';
bgctxCenter.fillRect(100, 100, 300, 300);

var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');

var srcCanvases = [bgcanvas, bgcanvasLowerRight, bgcanvasUpperLeft, bgcanvasCenter];
var dstCtxs = [ctx1, ctx2, ctx3, ctx4];

for (var i = 0; i < dstCtxs.length; ++i) {
    var srcCanvas = srcCanvases[i];
    var ctx = dstCtxs[i];
    ctx.drawImage(srcCanvas, -100, -100, 300, 300, -25, -25, 300, 300);
    ctx.drawImage(srcCanvas, -100, -100, 200, 200, -25, -25, 100, 100);
    ctx.drawImage(srcCanvas,    0, -100, 100, 200,  75, -25, 100, 100);
    ctx.drawImage(srcCanvas,    0, -100, 200, 200, 175, -25, 100, 100);
    ctx.drawImage(srcCanvas, -100,    0, 200, 100, -25,  75, 100, 100);
    ctx.drawImage(srcCanvas,    0,    0, 200, 100, 175, 75,  100, 100);
    ctx.drawImage(srcCanvas, -100,    0, 200, 200, -25, 175, 100, 100);
    ctx.drawImage(srcCanvas,    0,    0, 100, 200, 75,  175, 100, 100);
    ctx.drawImage(srcCanvas,    0,    0, 200, 200, 175, 175, 100, 100);
}

</script>
</body></html>